<template>
  <view class="inner-style bgf pdt-2 redempt-row">
    <view class="dis-f justify-between align-center">
      <van-search class="font-s16" style="width: calc(100% - 170rpx); height: 80rpx" v-model="ticketCode" background="transparent" :clearable="false" placeholder="请输入核销码" />
      <van-button style="width: 160rpx; height: 80rpx" class="vam" color="#FE7F41" type="info" @click="getRedemptInfo">查询</van-button>
    </view>
    <view class="order-content mgt-6 bgf" v-if="orderId">
      <view class="pdlr-2 mgb-4">
        <view class="font-s16">
          {{ formData.ebMerActivityTicketName }}
        </view>
        <view class="cf mgt-2">
          <image class="icon-img2 fl border-radius" :src="getImg(formData.ebMerActivityIcon)"></image>
          <view class="fl mgl-2 color06" style="width: calc(100% - 150rpx)">
            <p class="w100 base-ellipsis font-s16">{{ formData.ebMerActivityName }}</p>
            <p>{{ formData.ebMerName }}</p>
            <view class="cf">
              <view class="fl">
                数量<span class="mgl-2">X{{ formData.totalNum }}</span>
              </view>
              <view class="fr" @click="getDetail">
                实付<span class="colormark font-semlbold mgr-1">￥{{ Number(formData.payPrice).toFixed(2) }}</span>
                <van-icon name="arrow" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="pdlr-2 mgb-4">
        <view class="font-s16 color01 title mgb-2"> 详情信息 </view>
        <view class="dis-f justify-between mgb-2" v-for="(item, index) of productLists">
          <view class="cf pdtb-1" style="width: 70%">
            <view class="fl color08 font-s14 base-ellipsis" style="max-width: 80%">
              {{ item.name }}
            </view>
            <view class="fr color04 font-s12"> ({{ item.unmber }}瓶) </view>
          </view>
          <view class="color08 font-s14"> ￥{{ item.price }} </view>
        </view>
      </view>
      <orderInfo :isPayTime="true" :formData="formData" />
    </view>
    <view class="pd-2 footer-fixed bgf">
      <van-button class="w100 font-semlbold" type="info" round @click="onSubmit" :disabled="!orderStatus" :loading="loading">{{ !orderId || orderStatus ? '确认核销' : '已核销' }}</van-button>
    </view>
    <priceDetail ref="priceDetail" :orderId="orderId" />
  </view>
</template>

<script>
import priceDetail from './components/price_detail.vue';
import orderInfo from './components/order_info.vue';
import { orderVerification, orderInfoByticketCode } from '../../utils/merorder/mer';
export default {
  components: {
    priceDetail,
    orderInfo,
  },
  computed: {
    orderStatus() {
      return this.formData.refundStatus === 0 && this.formData.status === 1;
    },
  },
  data() {
    return {
      ticketCode: '',
      loading: false,
      formData: { name: '' },
      productLists: [],
      /** 根据订单编号判断是否查询订单成功 */
      orderId: '',
    };
  },
  onLoad(option) {
    this.ticketCode = option.ticketCode || '';
    if (!!this.ticketCode) {
      this.getRedemptInfo();
    }
  },
  methods: {
    getRedemptInfo() {
      if (!this.ticketCode) {
        this.$toast('请输入核销码');
        return false;
      }
      orderInfoByticketCode({
        ticketCode: this.ticketCode,
      })
        .then((res) => {
          if (res.code === 200) {
            this.orderId = res.data.orderNo;
            this.formData = {
              ...res.data,
              orderId: res.data.orderNo,
              createTime: res.data.orderTime,
            };
            this.productLists = res.data.ebMerActivityTicketProductList || [];
            this.$nextTick(() => {
              this.$refs.priceDetail.orderInfo();
            });
          } else {
            this.orderId = '';
          }
        })
        .catch(() => {
          this.orderId = '';
        });
    },
    /** 打开订单详情 */
    getDetail() {
      this.$refs.priceDetail.handleOpen();
    },
    onSubmit() {
      this.loading = true;
      orderVerification({
        ticketCode: this.ticketCode,
        userId: this.$Cache.get('UID'),
      })
        .then((res) => {
          this.$toast('核销成功');
          this.loading = false;
          uni.redirectTo({
            url: '/pages/local_life_order/redempt_list', // 目标页面的路径
          });
        })
        .catch(() => {
          this.$toast('提交失败');
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.redempt-row {
  min-height: 100vh;
  ::v-deep .van-search .van-cell {
    height: 80rpx;
    line-height: 66rpx;
  }
  ::v-deep .van-search {
    padding: 0;
  }
  ::v-deep .van-search__content {
    background-color: #f5f5f5;
  }
  .order-content {
    padding-bottom: 160rpx;
  }
  ::v-deep .van-field__control {
    font-size: 32rpx;
    font-family: 'PingFang Semibold', serif;
  }
}
</style>
